import React from 'react'

class MessageSettingWordEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      text: ""
    }
  }

  componentWillReceiveProps(props) {
    this.setState({
      text: props.text
    })
  }

  onChange(event, key) {
    var value = $(event.target).val();
    this.setState({
      text: value
    })
  }

  onDataSubmit() {
    var value = $(this.refs.MessageWord).val();
    console.log(value)
    this.props.onAddMessageWordClick(value)
    $(this.refs.MessageKeyWord).val("")
  }

  render() {
    var self = this;
    return (
      <div className="modal fade" id="DemoSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="demo-modal-label">添加文字</h4>
            </div>
            <div className="modal-body">

              <div className="form-group">
                <div className="message-eventkey-list">
                 <textarea ref="MessageWord" className="form-control textarea_input" id="area"
                            onChange={(event)=>this.onChange(event)} rows="10" value={this.state.text}></textarea>
                </div>
              </div>

            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>确定</button>
            </div>

          </div>
        </div>
      </div>
    )
  }
}

export default MessageSettingWordEdit
